import React, { useState, useEffect } from 'react';
import { Modal, Input, Button, Tag, Form, Select, Row, Col } from 'antd';
import './AddchengyuanForm.css';

const { TextArea } = Input;
const { Option } = Select;

interface AddchengyuanFormProps {
  isVisible: boolean;
  onClose: () => void;
}

const AddchengyuanForm: React.FC<AddchengyuanFormProps> = ({ isVisible, onClose }) => {
  const [modalVisible, setModalVisible] = useState(isVisible);
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [availableTags] = useState<string[]>(['Java', 'Python', 'C++', '前端开发', '后端开发']);
  const [form] = Form.useForm();

  useEffect(() => {
    setModalVisible(isVisible);
  }, [isVisible]);

  const handleClose = () => {
    setModalVisible(false);
    onClose(); // 调用父组件的 onClose 回调函数
  };

  const handleTagClose = (removedTag: string) => {
    // 移除选中的标签
    const newTags = selectedTags.filter(tag => tag !== removedTag);
    setSelectedTags(newTags);

    // 更新表单中的项目标签
    form.setFieldsValue({ projectTags: newTags.join(',') });

    // 更新可用标签的状态
    const updatedAvailableTags = availableTags.map(tag =>
      tag === removedTag ? { ...tag, selected: false } : tag
    );
    setAvailableTags(updatedAvailableTags);
  };

  const addTag = (tag: string) => {
    if (!selectedTags.includes(tag)) {
      const newTags = [...selectedTags, tag];
      setSelectedTags(newTags);
      form.setFieldsValue({ projectTags: newTags.join(',') });

      // 更新可用标签的状态
      const updatedAvailableTags = availableTags.map(t =>
        t === tag ? { ...t, selected: true } : t
      );
      setAvailableTags(updatedAvailableTags);
    }
  };

  const handleSubmit = (values: any) => {
    console.log('表单提交的值: ', values);
    // 在此处可以处理表单提交逻辑
    handleClose(); // 关闭模态框
  };

  return (
    <Modal
      visible={modalVisible}
      onCancel={handleClose}
      width={1200}
      footer={null}
      className="unique-gongzuotai-modal"
    >
      <div className="unique-gongzuotai-container unique-zhaomu-header">
        <h2>项目招募</h2>
        <Form
          layout="vertical"
          form={form}
          onFinish={handleSubmit}
          className="unique-gongzuotai-form-group"
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="项目名称" name="projectName" rules={[{ required: true, message: '请输入项目名称' }]}>
                <Input placeholder="请输入项目名称" style={{ height: '50px' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="项目类型" name="projectType" rules={[{ required: true, message: '请选择项目类型' }]}>
                <Select placeholder="---" style={{ height: '50px' }}>
                  <Option value="type1">创业比赛</Option>
                  <Option value="type2">创新比赛</Option>
                  {/* 添加更多项目类型选项 */}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Form.Item label="项目内容" name="projectContent" rules={[{ required: true, message: '请输入项目内容' }]}>
            <TextArea rows={4} placeholder="请输入项目内容" style={{ height: '100px' }} />
          </Form.Item>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="项目目标" name="projectGoal">
                <TextArea rows={2} placeholder="请输入项目目标" style={{ height: '130px' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="项目成果" name="projectOutcome">
                <TextArea rows={2} placeholder="请输入项目成果" style={{ height: '130px' }} />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item label="所需学生说明" name="studentDescription">
            <TextArea rows={2} placeholder="请输入所需学生说明" style={{ height: '100px' }} />
          </Form.Item>
          <Form.Item label="项目标签" name="projectTags">
          <div style={{ display: 'flex', alignItems: 'center', padding: '10px 11px', border: '1px solid #d9d9d9', borderRadius: '8px',height:'40px'}}>
              {selectedTags.map((tag, index) => (
                <Tag
                  key={index}
                  closable
                  onClose={() => handleTagClose(tag)}
                  style={{ fontSize: '16px', padding:'5px 8px' }}
                >
                  {tag}
                </Tag>
              ))}
            </div>
            <div className="unique-gongzuotai-available-tags" style={{ marginTop: '15px'}}>
              {availableTags.map((tag, index) => (
                <Tag
                  key={index}
                  style={{
                    backgroundColor: selectedTags.includes(tag) ? 'default' : 'white',
                    borderColor: '#d9d9d9',
                    color: 'black',
                    borderStyle: 'solid',
                    borderWidth: '1px'
                  }}
                  onClick={() => addTag(tag)}
                  className={`unique-gongzuotai-available-tag ${selectedTags.includes(tag) ? 'unique-gongzuotai-tag-selected' : ''}`}
                >
                  {tag}
                </Tag>
              ))}
            </div>
          </Form.Item>
          <Form.Item>
            <Button className="zhaomu-submit-button" type="primary" htmlType="submit">
              发布
            </Button>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default AddchengyuanForm;
